[Endpoint] Policy List UI route and initial view #56918

paul-tavares · 2020-02-05T21:01:02Z

Summary

Add the UI route for Policy List (/endpoint/policy) and initial view.

Task: elastic/endpoint-app-team/issues/141

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser

For maintainers

na

Action was added to `usePageId` hook and triggered when component is unmounted

paul-tavares · 2020-02-05T21:07:57Z

x-pack/plugins/endpoint/public/applications/endpoint/store/routing/action.ts

@@ -11,4 +11,9 @@ interface UserNavigatedToPage {
  readonly payload: PageId;
 }

-export type RoutingAction = UserNavigatedToPage;
+interface UserNavigatedFromPage {


@peluja1012 would like your feedback here if you get a chance. I added this Routing action, which is dispatched when the component that used usePageId is un-mounted. See changes below to the hook. In Policy List, I'm using it to reset state when the user leaves the view.

I think this is good. Though in our next PR we are adding a "routing" middleware, which keeps track of url changes. In the alerts page, we removed usePageId in favor of this "routing" middleware. #57142

x-pack/plugins/endpoint/public/applications/endpoint/types.ts

…y-UI-Route

…y-UI-Route # Conflicts: # x-pack/plugins/endpoint/public/applications/endpoint/types.ts

If defining a Column `render()` method whose first argument is of type other than `any`, a TS error is raised against the `items` prop. Posted a question to the EUI channel.

Fixed based on input from EUI team member

kevinlog · 2020-02-07T20:02:18Z

x-pack/test/functional/apps/endpoint/policy_list.ts

+    });
+    it('shows policy count total', async () => {
+      await pageObjects.common.navigateToUrlWithBrowserHistory('endpoint', '/policy');
+      const policyTotal = await testSubjects.getVisibleText('policyTotalCount');


Is this how we look at table values?

@kevinlog no. @aisantos showed us a different service that we need to load which has a method that will retrieve all the data in the table and then you can check each value for the cells

charlie-pichette · 2020-02-07T21:01:08Z

x-pack/test/functional/apps/endpoint/policy_list.ts

+  const pageObjects = getPageObjects(['common']);
+  const testSubjects = getService('testSubjects');
+
+  describe('Endpoint Policy List', () => {


I think this is good for an initial set of tests. We will want to leverage the actual page object file and its capabilities in a future PR. After my PR is merged it will be easier to refactor.

👍
I might still another test to validate the expected table columns headers are present and display the correct label. Will wait to see again how to use that Table service 😃

- to assist UT

…y-UI-Route # Conflicts: # x-pack/test/functional/apps/endpoint/index.ts

paul-tavares · 2020-02-10T16:26:03Z

All,
This is ready for review. Note that a Redux Middleware wrapper factory was added to store/index in order to support keeping Middleware focused on its concern and unaware of global sate (thank you @oatkiller ) - it essentially re-write the getState() method to return the piece of global state that applies to that concern (using a selector()).

oatkiller · 2020-02-13T15:01:00Z

x-pack/plugins/endpoint/public/applications/endpoint/store/policy_list/middleware.ts

+    ) {
+      // load data from API
+      // Refactor tracked via: https://github.com/elastic/endpoint-app-team/issues/150
+      setTimeout(() => {


Why setTimeout here?

I was trying emulate an API call - so needed a slight delay in order for the Unit Test cases to behave as expected (once we have a real API call in place).

Also - this might be good for me to recap our conversation in Slack here:

I was not sure if I should include a fake_data file along with my PR into master as a temporary solution until we integrate with the Ingest API. After our discussion, it seems that is ok to do and Resolver is already doing it. Adding some fake data will allow the team to view the page with data being populated.

So given that - I will add my local face data to the PR (I already had it, just did not include it 😃 )

Actually - now I'm thinking you are really saying "why did you not use await on sleep()

oatkiller · 2020-02-13T15:03:15Z

x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_list.tsx

+import { PolicyData } from '../../types';
+import { TruncateText } from '../../components/truncate_text';
+
+interface TTableChangeCallbackArguments {


Is TT on purpose or spelling?

I kind of like that some types initial letter alludes the type. When I'm import'ing, I find it harder to determine what is executable code and what is a Type (even with the fact that my IDE provides different icons). But - I think this is anti-pattern nowadays right? to name your types starting with I (interface), T (type)?

I will rename it to remove the initial T.

oatkiller · 2020-02-13T15:37:18Z

x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_list.tsx

+  return Date.now() - date.getTime() >= 8.64e7 ? (
+    <>
+      <FormattedDate value={date} year="numeric" month="short" day="2-digit" />
+      {' @'}


I think the formatting should be left up to i18n entirely in this case. Consider the 'ar-EG' locale for example. When using date and time together, time comes first in this locale.

In react you could get this treatment with:

const FormattedDateAndTime: React.FC<{ date: Date }> = ({ date }) => { // If date is greater than or equal to 24h (ago), then show it as a date // else, show it as relative to "now" return Date.now() - date.getTime() >= 8.64e7 ? ( <FormattedDate value={date} year="numeric" month="short" day="2-digit" hour="numeric" minute="numeric" /> ) : ( <FormattedRelative value={date} /> ); };

Yeah, that's what I was hoping for, but the UX mocks show that we should display the dates as:

Do you know if there is an issue if we use the implemented format?

During a UX review, there was also some questions around how the Kibana timezone and date/time format setting might impact display of these.

/cc @bfishel

oatkiller · 2020-02-13T15:38:09Z

x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_list.tsx

+const renderDate = (d: string, _item: PolicyData) => (
+  <TruncateTooltipText>
+    <EuiToolTip content={d}>
+      <FormattedDateAndTime date={new Date(d as string)} />


d is already a string: const renderDate = (d: string, //... so you should be able do drop the casting operator here

Done 👍
Thanks

tries to emulate a Datasources API response from Ingest

…y-UI-Route

kevinlog · 2020-02-13T17:48:26Z

@elasticmachine merge upstream

…y-UI-Route

…o task/EMT141-Policy-UI-Route

…y-UI-Route

dplumlee · 2020-02-13T21:59:36Z

x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_list.tsx

+  );
+};
+
+const renderDate = (d: string, _item: PolicyData) => (


this is a bit of a nit but one char variable names are pretty meh

Agreed 😄 . I will update it. Thanks.

…y-UI-Route

…y-UI-Route # Conflicts: # x-pack/plugins/endpoint/common/types.ts # x-pack/plugins/endpoint/public/applications/endpoint/index.tsx # x-pack/plugins/endpoint/public/applications/endpoint/store/action.ts # x-pack/plugins/endpoint/public/applications/endpoint/store/index.ts # x-pack/plugins/endpoint/public/applications/endpoint/types.ts # x-pack/test/functional/apps/endpoint/index.ts

…y-UI-Route

kibanamachine · 2020-02-14T18:55:09Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: adfa203

History

💚 Build #26832 succeeded b14f88a
💔 Build #26679 failed 13920fd
💔 Build #26654 failed 8812f32
💔 Build #26601 failed cd5488d
💚 Build #26196 succeeded 438cb77

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

* Add Endpoint plugin and Resolver embeddable (#51994) * Add functional tests for plugins to x-pack (so we can do a functional test of the Resolver embeddable) * Add Endpoint plugin * Add Resolver embeddable * Test that Resolver embeddable can be rendered Conflicts: x-pack/.i18nrc.json x-pack/test/api_integration/apis/index.js * [Endpoint] Register endpoint app (#53527) * register app, create functional test * formatting * update tests * adjust test data for endpoint * add endpoint tests for testing spaces, app enabled, disabled, etc * linting * add read privileges to endpoint * rename variable since its used now * remove deprecated context * remove unused variable * fix type check * correct test suite message Co-Authored-By: Larry Gregory <[email protected]> Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Larry Gregory <[email protected]> * [Endpoint] add react router to endpoint app (#53808) * add react router to endpoint app * linting * linting * linting * correct tests * change history from hash to browser, add new test util * remove default values in helper functions * fix type check, use FunctionComponent as oppsed to FC * use BrowserRouter component * use BrowserRouter component lin * add comments to test framework, change function name to include browserHistory Co-authored-by: Elastic Machine <[email protected]> * EMT-issue-65: add endpoint list api (#53861) add endpoint list api * EMT-65:always return accurate endpoint count (#54423) EMT-65:always return accurate endpoint count, independent of paging properties * Resolver component w/ sample data (#53619) Resolver is a map. It shows processes that ran on a computer. The processes are drawn as nodes and lines connect processes with their parents. Resolver is not yet implemented in Kibana. This PR adds a 'map' type UX. The user can click and drag to pan the map and zoom using trackpad pinching (or ctrl and mousewheel.) There is no code providing actual data. Sample data is included. The sample data is used to draw a map. The fundamental info needed is: process names the parent of a process With this info we can topologically lay out the processes. The sample data isn't yet in a realistic format. We'll be fixing that soon. Related issue: elastic/endpoint-app-team#30 * Resolver test plugin not using mount context. (#54933) Mount context was deprecated. Use core.getStartServices() instead. * Resolver nonlinear zoom (#54936) * [Endpoint] add Redux saga Middleware and app Store (#53906) * Added saga library * Initialize endpoint app redux store * Resolver is overflow: hidden to prevent obscured elements from showing up (#55076) * [Endpoint] Fix saga to start only after store is created and stopped on app unmount (#55245) - added `stop()`/`start()` methods to the Saga Middleware creator factory - adjust tests based on changes - changed application `renderApp` to stop sagas when react app is unmounted * Resolver zoom, pan, and center controls (#55221) * Resolver zoom, pan, and center controls * add tests, fix north panning * fix type issue * update west and east panning to behave like google maps * [Endpoint] FIX: Increase tests `sleep` default duration back to 100ms (#55492) Revert `sleep()` default duration, in the saga tests, back to 100ms in order to prevent intermittent failures during CI runs. Fixes #55464 Fixes #55465 * [Endpoint] EMT-65: make endpoint data types common, restructure (#54772) [Endpoint] EMT-65: make endpoint data types common, use schema changes * Basic Functionality Alert List (#55800) * sets up initial grid and data type * data feeds in from backend but doesnt update * sample data feeding in correctly * Fix combineReducers issue by importing Redux type from 'redux' package * Add usePageId hook that fires action when user navigates to page * Strict typing for middleware * addresses comments and uses better types * move types to common/types.ts * Move types to endpoint/types.ts, address PR comments blah 2 Co-authored-by: Pedro Jaramillo <[email protected]> * [Endpoint] Add Endpoint Details route (#55746) * Add Endpoint Details route * add Endpoint Details tests * sacrifices to the Type gods * update to latest endpoint schema Co-authored-by: Elastic Machine <[email protected]> * [Endpoint] EMT-67: add kql support for endpoint list (#56328) [Endpoint] EMT-67: add kql support for endpoint list * [Endpoint] ERT-82 ERT-83 ERT-84: Alert list API with pagination (#56538) * ERT-82 ERT-83 ERT-84 (partial): Add Alert List API with pagination * Better type safety for alert list API * Add Test to Verify Endpoint App Landing Page (#57129) Conflicts: x-pack/test/functional/page_objects/index.ts * fixes render bug in alert list (#57152) Co-authored-by: Elastic Machine <[email protected]> * Resolver: Animate camera, add sidebar (#55590) This PR adds a sidebar navigation. clicking the icons in the nav will focus the camera on the different nodes. There is an animation effect when the camera moves. Conflicts: yarn.lock * [Endpoint] Task/basic endpoint list (#55623) * Adds host management list to endpoint security plugin Co-authored-by: Elastic Machine <[email protected]> * [Endpoint] Policy List UI route and initial view (#56918) * Initial Policy List view * Add `endpoint/policy` route and displays Policy List * test cases (both unit and functional) Does not yet interact with API (Ingest). * Add ApplicationService app status management (#50223) This was already backported, but changes to endpoint app could not be backported, since endpoint app itself hadn't been backported. Now that the endpoint app is backported, reapply the endpoint specific changes from the original commit. * Implements `getStartServices` on server-side (#55156) This was already backported, but changes to endpoint app could not be backported, since endpoint app itself hadn't been backported. Now that the endpoint app is backported, reapply the endpoint specific changes from the original commit. * [ui/utils/query_string]: Remove unused methods & migrate apps to querystring lib (#56957) This was already backported, but changes to endpoint app could not be backported, since endpoint app itself hadn't been backported. Now that the endpoint app is backported, reapply the endpoint specific changes from the original commit. Co-authored-by: Kevin Logan <[email protected]> Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Larry Gregory <[email protected]> Co-authored-by: nnamdifrankie <[email protected]> Co-authored-by: Davis Plumlee <[email protected]> Co-authored-by: Paul Tavares <[email protected]> Co-authored-by: Pedro Jaramillo <[email protected]> Co-authored-by: Dan Panzarella <[email protected]> Co-authored-by: Madison Caldwell <[email protected]> Co-authored-by: Charlie Pichette <[email protected]> Co-authored-by: Candace Park <[email protected]> Co-authored-by: Pierre Gayvallet <[email protected]> Co-authored-by: Alexey Antonov <[email protected]>

paul-tavares added 3 commits February 4, 2020 12:47

Initial Policy List view

7b91e2f

Add userNavigatedFromPage action.ts

4822fd2

Action was added to `usePageId` hook and triggered when component is unmounted

Policy List store setup

91db958

paul-tavares added v8.0.0 release_note:skip Skip the PR/issue when compiling release notes v7.7.0 Team:Endpoint Management labels Feb 5, 2020

paul-tavares commented Feb 5, 2020

View reviewed changes

x-pack/plugins/endpoint/public/applications/endpoint/types.ts Outdated Show resolved Hide resolved

paul-tavares added 6 commits February 5, 2020 16:13

Merge remote-tracking branch 'upstream/master' into task/EMT141-Polic…

9e29674

…y-UI-Route

Added Formatted dates + temp type for policy data

9a45a8c

Merge remote-tracking branch 'upstream/master' into task/EMT141-Polic…

5cc2f9d

…y-UI-Route # Conflicts: # x-pack/plugins/endpoint/public/applications/endpoint/types.ts

Fix TS error on EuiBasicTable

ad57e4c

If defining a Column `render()` method whose first argument is of type other than `any`, a TS error is raised against the `items` prop. Posted a question to the EUI channel.

Fix Type definition for renderDate method

515099e

Fixed based on input from EUI team member

Policy List Functional Tests

c2f1769

kevinlog reviewed Feb 7, 2020

View reviewed changes

charlie-pichette reviewed Feb 7, 2020

View reviewed changes

paul-tavares added 5 commits February 10, 2020 09:46

Added serverReturnedPolicyListData dispatch in middleware

ab82e1d

- to assist UT

Added store Middleware wrapper + adjusted MiddlwareFactory type

e656b0c

Adjust Functional test that checks Policy list is loaded

e3675c1

Unit Tests for Policy List store concerns

01a5e2e

Merge remote-tracking branch 'upstream/master' into task/EMT141-Polic…

8c66c60

…y-UI-Route # Conflicts: # x-pack/test/functional/apps/endpoint/index.ts

paul-tavares marked this pull request as ready for review February 10, 2020 16:21

paul-tavares requested review from dplumlee, oatkiller, peluja1012, bkimmel, kqualters-elastic and parkiino February 10, 2020 16:22

oatkiller reviewed Feb 13, 2020

View reviewed changes

peluja1012 approved these changes Feb 13, 2020

View reviewed changes

paul-tavares added 4 commits February 13, 2020 12:27

added fake data for Policy list

5d09b57

tries to emulate a Datasources API response from Ingest

Rename type (remove leading T)

da416d4

Remove unnecessary type casting

d7c9ea4

Merge remote-tracking branch 'upstream/master' into task/EMT141-Polic…

a1b5a77

…y-UI-Route

elasticmachine and others added 6 commits February 13, 2020 11:48

Merge branch 'master' into task/EMT141-Policy-UI-Route

cd5488d

Fix test failure issue

5d276d1

Merge remote-tracking branch 'upstream/master' into task/EMT141-Polic…

78bc8b4

…y-UI-Route

Merge remote-tracking branch 'origin/task/EMT141-Policy-UI-Route' int…

8812f32

…o task/EMT141-Policy-UI-Route

Added width to some table columns

31676c0

Merge remote-tracking branch 'upstream/master' into task/EMT141-Polic…

13920fd

…y-UI-Route

dplumlee reviewed Feb 13, 2020

View reviewed changes

paul-tavares added 7 commits February 14, 2020 08:32

Merge remote-tracking branch 'upstream/master' into task/EMT141-Polic…

2d58030

…y-UI-Route

Rename input arg of renderDate

546a193

Merge remote-tracking branch 'upstream/master' into task/EMT141-Polic…

b14f88a

…y-UI-Route

Merge remote-tracking branch 'upstream/master' into task/EMT141-Polic…

1fc8d65

…y-UI-Route

Remove extra <EuiTitle

04974e1

Merge remote-tracking branch 'upstream/master' into task/EMT141-Polic…

adfa203

…y-UI-Route

kevinlog approved these changes Feb 14, 2020

View reviewed changes

paul-tavares merged commit fe21356 into elastic:master Feb 14, 2020

paul-tavares deleted the task/EMT141-Policy-UI-Route branch February 14, 2020 19:28

kevinlog added the Feature:Endpoint Elastic Endpoint feature label Feb 18, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Endpoint] Policy List UI route and initial view #56918

[Endpoint] Policy List UI route and initial view #56918

paul-tavares commented Feb 5, 2020 •

edited

Loading

paul-tavares Feb 5, 2020

peluja1012 Feb 11, 2020 •

edited

Loading

kevinlog Feb 7, 2020

paul-tavares Feb 7, 2020

kevinlog Feb 7, 2020

charlie-pichette Feb 7, 2020 •

edited

Loading

paul-tavares Feb 7, 2020

paul-tavares commented Feb 10, 2020

oatkiller Feb 13, 2020

paul-tavares Feb 13, 2020

paul-tavares Feb 13, 2020

oatkiller Feb 13, 2020

paul-tavares Feb 13, 2020

oatkiller Feb 13, 2020

paul-tavares Feb 13, 2020

oatkiller Feb 13, 2020

paul-tavares Feb 13, 2020

kevinlog commented Feb 13, 2020

dplumlee Feb 13, 2020

paul-tavares Feb 14, 2020

kibanamachine commented Feb 14, 2020

[Endpoint] Policy List UI route and initial view #56918

[Endpoint] Policy List UI route and initial view #56918

Conversation

paul-tavares commented Feb 5, 2020 • edited Loading

Summary

Checklist

For maintainers

Choose a reason for hiding this comment

peluja1012 Feb 11, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

charlie-pichette Feb 7, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paul-tavares commented Feb 10, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kevinlog commented Feb 13, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kibanamachine commented Feb 14, 2020

💚 Build Succeeded

History

paul-tavares commented Feb 5, 2020 •

edited

Loading

peluja1012 Feb 11, 2020 •

edited

Loading

charlie-pichette Feb 7, 2020 •

edited

Loading